<template>
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <div>
                <img src="../assets/logo.png" alt="">
                <span>扶贫助农平台</span>
            </div>
            <div>
                <el-button type="info" @click="logout">退出</el-button>
            </div> 
        </el-header>
        <!-- 主体部分 -->
        <el-container>
            <el-aside width="200px">
                <el-menu :router ="true"
                    background-color="#666"
                    text-color="#fff"
                >
                    <!-- 主页 -->
                    <el-menu-item index="/index">
                        <i class="el-icon-location"></i>
                        <span slot="title">主页</span>
                    </el-menu-item>
                    <!-- 志愿者 -->
                    <el-submenu index="b">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>志愿者</span>
                        </template>
                        <el-menu-item index="/volunteer">志愿者管理</el-menu-item>
                    </el-submenu>
                    <!-- 贫困户 -->
                    <el-submenu index="c">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>贫困户</span>
                        </template>
                        <el-menu-item index="/poor">贫困户管理</el-menu-item>
                    </el-submenu>
                    <!-- 留言板 -->
                    <el-submenu index="d">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>留言板</span>
                        </template>
                        <el-menu-item index="/msgboard">留言板管理</el-menu-item>
                    </el-submenu>
                    <!-- 扶贫政策 -->
                    <el-submenu index="e">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>扶贫政策</span>
                        </template>
                        <el-menu-item index="/alleviation">扶贫政策管理</el-menu-item>
                    </el-submenu>
                    <!-- 用户 -->
                    <el-submenu index="f">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>用户</span>
                        </template>
                        <el-menu-item index="/user">用户管理</el-menu-item>
                    </el-submenu>
                    <!-- 收藏 -->
                    <el-submenu index="g">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>收藏</span>
                        </template>
                        <el-menu-item index="/collection">收藏管理</el-menu-item>
                    </el-submenu>
                    <!-- 轮播图 -->
                    <el-submenu index="h">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>轮播图</span>
                        </template>
                        <el-menu-item index="/carousel">轮播图管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    methods: {
        logout(){
            //清除token
            window.sessionStorage.clear('token')
            //请求跳转
            this.$router.push('/')
        }
    }
}
</script>

<style lang="scss" scoped>
.home-container{
    height: 100%;
}
.el-header{
    background: rgb(44,43,43);
    display:flex;
    justify-content: space-between;
    color: #fff;
    div{
        display: flex;
        align-items: center;
        img{
            width: 50px;
        }
    }
}
.el-aside{
    background: rgb(44,43,43);
}
</style>

